<template>
    <div
        :class="{
            allHeight: $store.state.panoramaStatus,
            zeroHeight: !$store.state.panoramaStatus,
        }"
    >
        <div id="panoramaConianer"></div>
        <div class="panoramaClose" @click="changePanorama">关闭</div>
    </div>
    <div class="leftFx">
        <ThemeTitlenew :title="title" />
        <!-- 自然灾害 -->
        <div class="geoIntro" style="margin-top: 19px">
            <div class="geoIntroTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="geoIntroWord">自然灾害风险区</div>
            </div>
        </div>
        <!-- 饼图 -->
        <div id="natural"></div>
        <!-- 风险统计 :class="{'disasterActive':currentIndex==index}"-->
        <div class="fourDisasters">
            <div
                class="disaster"
                v-for="(item, index) in zrzhData"
                :key="index"
                @click="showDataOnEarth(item,index)"
            >
                <div class="upContent">
                    <div>
                        <div></div>
                    </div>
                    <div>{{ item.label }}</div>
                </div>
                <div class="downContent">
                    <div></div>
                    <div>
                        {{ item.count}}
                        <span>处</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 安全生产 -->
        <div class="geoIntro geoIntroAQ" style="margin-top: 20px">
            <div class="geoIntroTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="geoIntroWord">安全生产风险点</div>
            </div>
        </div>
        <div class="safeProduc">
            <div class="dangerItem">
                <span>危化品与非煤矿山：</span>
                <span>{{ weiCount + feikuangCount }}处</span>
            </div>
            <div class="enterpriseNum">
                <div class="enterprise">
                    <!-- :class="{'weiActive':isWei}" -->
                    <div @click="weiHandleClick()">危化品</div>
                    <div>{{ weiCount }}</div>
                </div>
                <div class="enterprise">
                    <!-- :class="{'weiActive':isFei}" -->
                    <div @click="feiHandleClick()">非煤矿山</div>
                    <div>{{ feikuangCount }}</div>
                </div>
            </div>
            <!-- <div class="twoPoints">
                <span>两点：</span>
                <span>危化品园区</span>
                ,
                <span>琼中海峡</span>
            </div> -->
            <!-- <div class="oneArea">
                <span>一面：</span>
                <span>全省公路铁路网</span>
            </div> -->
        </div>
        <!-- 危险品分类统计 -->
        <div class="troubleMsg" style="margin-top: 25px">
            <div class="troubleMsgTitle">
                  <!-- <div class="sideLine"></div> -->
                <div class="troubleMsgWorld">
                    危险品分类统计
                </div>
            </div>
            <div class="troubleMsgEcharts" id="weiChart">
            </div>
            <!-- <div class="troubleTitle">
                <div
                    v-for="(item, index) in weiAndQu"
                    :key="index"
                    :class="{ titleActive: currentTitleIndex == index }"
                    @click="changeChart(index)"
                >
                    {{ item.name }}
                </div>
            </div>
            <div class="troubleCharts">
                <div id="weiChart" v-show="currentTitleIndex == 0"></div>
                <div id="qushiChart" v-show="currentTitleIndex == 1"></div>
            </div> -->
        </div>
        <!-- 弹框 -->
       	<div class="infobox1" id="infobox1" style="position:absolute">
			<div class="treeinfo-top">
			   <span class="treeinfo-title">{{infoTitle}}</span>
			   <i class="el-icon-close close" @click="closeInfo"></i>
			</div>
			<div class="treeinfo-con">
				<div class="treeinfo-contitle">基本信息</div>
				<div class="treeinfo-content" >
					<div class="treeinfo-inner" v-for="(key,index) of Object.keys(inconInfo)" :key="index">
						<span>{{ key + '：' }}</span>
						<span>{{ inconInfo[key] }}</span>
					</div>
				</div>
			</div>	
		</div>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    watch,
    reactive,
    nextTick,
    onBeforeMount,
} from "vue";

import { get } from "../../../util/request";
import axios from "axios";
import echarts from "echarts";
import { ElLoading } from "element-plus";
import { useStore } from "vuex";
import doc from "../../hngk/naturalData";
export default {
    components: {
        ThemeTitlenew,
    },
     props:{
            zrzhCount:Array,
            aqscCount:Array,
            qushiCount:Array
        },
    setup(props) {
        let opt, tp;
        let inconInfo=reactive({})
        const store = useStore();
        let infoTitle = ref("")
        const title = provide("title", "风险分析");
        let currentIndex = ref(-1);
        let fourDisasters = ref(null);
        let weiCount = ref(52);
        let kbId = ref(0)
        let screenWidth =ref(1920); 
        let feikuangCount = ref(17);
        let currentTitleIndex = ref(0);
        let models = reactive({});
        let zrzhData = reactive([])
        let barArr = reactive([])
        let barArrData = reactive([])
        let danProArr=reactive([])
        let isWei = ref(false);
        let isFei = ref(false);
        let infoData = reactive([{title:"泥石流"}])
        let weiAndQu = [
            { name: "危化品分类统计" },
            { name: "安全事故数量趋势" },
        ];
        const changePanorama = () => {
            // console.log(store);
            store.commit("changePanoramaStatus", false);
        };
        function closeInfo(){
            const oneDiv1 =document.getElementById("infobox1");
            if(oneDiv1){
                 oneDiv1.style.display = "none";
            }   
        }
        function drawBar(barArr,barArrData) {
            var dom = document.getElementById("natural");
            var myChart = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    text: "自然灾害",
                    // "subtext": "火点类型",
                    x: "35%",
                    y: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 15,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 18,
                        fontWeight: "normal",
                        align: "center",
                    },
                },
                legend: {
                    width: "20%",
                    left: "right",
                    show: false,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    icon: "circle",
                    right: "-10%",
                    bottom: "0",
                    padding: [5, 10],
                    itemGap: 20,
                    data: barArr,
                },
                series: [
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["65%", "90%"],
                        color: ["#2ECACE", "#2039C3", "#0F9AF8", "#2B63D5"],
                        startAngle: -80,
                        labelLine: {
                            normal: {
                                length: 0,
                                length2: 10,
                                lineStyle: {
                                    width: 1,
                                },
                            },
                        },
                        label: {
                            normal: {
                                formatter: "{b|{b}:}\n{per|{d}%} ",

                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 20,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#b3e5ff",
                                        fontSize: 12,
                                        lineHeight: 20,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 12,
                                        padding: [1, 1],
                                        borderRadius: 2,
                                    },
                                },
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 14,
                                },
                            },
                        },
                        emphasis: {
                            show: false,
                            position: [30, 50],
                            label: {
                                show: true,
                                formatter: "{b|{b}:}  {per|{d}%}  ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 25,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: barArrData,
                        minAngle: 50,
                    },
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["55%", "57%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.2,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.5,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#fff",
                                                },
                                            ],
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function changeChart(index) {
            currentTitleIndex.value = index;
        }
        function drawWei(xData, yData) {
            var dom = document.getElementById("weiChart");
            var myChart = echarts.init(dom);
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top: "21%",
                    right: "3%",
                    left: "15%",
                    bottom: "23%",
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            color: "#e2e9ff",
                            rotate: 16,
                            textStyle: {
                                fontSize: 10,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        name: "个",
                        type: "log",
                        axisLabel: {
                            formatter: "{value}",
                            color: "#e2e9ff",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,1)",
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "bar",
                        data: yData,
                        barWidth: "10px",
                        itemStyle: {
                        //     normal: {
                        //     // barBorderRadius: 20,
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //         offset: 0,
                        //         color: '#4EF5E8'
                        //     }, {
                        //         offset: 1,
                        //         color: '#12BFF1'
                        //     }]),
                        //     shadowColor: 'rgba(0,160,221,1)',
                        //     shadowBlur: 4
                        //  }
                            normal: {
                                color: "rgba(0,244,255,1)",

                                // new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                                barBorderRadius: [0, 0, 0, 0],
                                shadowColor: "rgba(0,160,221,1)",
                                shadowBlur: 4,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 30,
                                width: 80,
                                height: 30,
                                backgroundColor: "rgba(0,160,221,0.1)",
                                borderRadius: 200,
                                position: ["0", "-20"],
                                distance: 1,
                                fontSize: 12,
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawQushi(quXData, quYData) {
            var dom = document.getElementById("qushiChart");
            var myChart = echarts.init(dom);
            let option = {
                // backgroundColor: '#fff',
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(255, 255, 255,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                ],
                                global: false,
                            },
                        },
                    },
                },

                xAxis: [
                    {
                        show: true,
                        type: "category",
                        axisLine: {
                            show: true,
                        },
                        splitArea: {
                            // show: true,
                            color: "#fff",
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            color: "#fff",
                            rotate: 40,
                            fontSize: 10,
                        },
                        splitLine: {
                            show: false,
                        },
                        boundaryGap: false,
                        data: quXData,
                    },
                ],
                grid: {
                    top: "23%",
                    right: "3%",
                    left: "13%",
                    bottom: "20%",
                    //borderWidth: 1
                },
                yAxis: [
                    {
                        type: "value",
                        name: "起",
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 12,
                            lineHeight: 15,
                        },
                        // max: 140,
                        //splitNumber: 4,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,0.1)",
                            },
                        },
                        axisLine: {
                            show: true,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "安全事故数量",
                        type: "line",
                        smooth: true, //是否平滑
                        showAllSymbol: false,
                        symbol: "circle",
                        symbolSize: 2,
                        lineStyle: {
                            normal: {
                                color: "#00b3f4",
                            },
                        },
                        itemStyle: {
                            color: "#00b3f4",
                        },
                        areaStyle: {
                            normal: {
                                color:
                                    // 'rgba(0,179,244,0.5)',
                                    new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(0,179,244,0.3)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,179,244,0)",
                                            },
                                        ],
                                        false
                                    ),
                                shadowColor: "rgba(0,179,244, 0.9)",
                                shadowBlur: 20,
                            },
                        },
                        data: quYData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        const addBoundInfoBox = (positionValue, elementId) => {
             const oneDiv = window.document.getElementById(elementId);
              oneDiv.style.display = "block";
            // console.log(oneDiv)
            let preRenderListener = viewer.scene.postRender.addEventListener(()=>{
                  let elWidth = oneDiv.offsetWidth;
                  let elHeight = oneDiv.offsetHeight;
                  if(screenWidth  === 1920){
                    elWidth = oneDiv.offsetWidth
                    elHeight = oneDiv.offsetHeight
                  }else if(screenWidth  === 3840){
                    elWidth = oneDiv.offsetWidth -1920;
                    elHeight = oneDiv.offsetHeight
                  }
                  const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
                    var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                    var alt=cartographicPosition.height;
                    var positions = [
                            Cesium.Cartographic.fromDegrees(lng,lat)
                    ];
                    var carto=new Cesium.Cartographic.fromDegrees(lng,lat)　　//输入经纬度
                    // var h2=viewer.scene.sampleHeight(carto);
					
                    // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
                    var position1 = Cesium.Cartesian3.fromDegrees(lng, lat);//加入高度之后，不会飘，但是不能解决地球缩放问题
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position1,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1.3 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
            })
        };
        function iconClick(){
            let baseurl = window.loginUrl;
            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
            const pick = viewer.scene.pick(movement.position);
            // console.log(pick)
            if(pick.primitive && pick.id.type =="自然灾害"){
                var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pick.primitive._position); //笛卡尔转84
                var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(lng), 
                    parseFloat(lat),
                    80000
                ),
                duration:1.5
                }
            viewer.camera.flyTo(option);
            closeInfo()
              if(pick.id.dataType){
                 infoTitle.value = pick.id.dataType
            }
            option.complete = ()=>{
                if(pick && pick.id.kbId &&  pick.id.id){
                 axios({
			     	url: `${baseurl}/api/v2/detail/getNaturalDisastersDetail`,
			     	method: 'get',
                    params:{
                       kbId:pick.id.kbId,
                       dataId:pick.id.id
                    }
			     }).then((res) => {
                     if(res.data.code == 200){
                         let vData = res.data.data
                         console.log(vData)
                         let dic = doc[pick.id.zidatatype];
                         for(let key in dic){
                             inconInfo[dic[key]] = vData[key];
                         }
                        addBoundInfoBox(pick.primitive._position,"infobox1")
                     }
			   })
            }
            }
            }
            // console.log(pick.id.dataType)
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
        // 自然灾害
        function naturalDisaster(){
            let baseurl = window.loginUrl;
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"11"
                    }
			     }).then((res) => {
                    if(res.status == 200){
                    // console.log(res.data)
                    // zrzhData = res.data
                    for(var i =0;i<res.data.length;i++){
                        zrzhData.push(res.data[i])
                        // console.log(res.data[i])
                        barArr.push(res.data[i].label)
                        let obj ={}
                        obj.name = res.data[i].label
                        obj.value = res.data[i].count
                        barArrData.push(obj)
                    }
                    drawBar(barArr,barArrData)
                    // console.log(barArr)
                    // console.log(barArrData)
                }
			})
        }
        function showDataOnEarth(item,index){
            let baseurl = window.loginUrl;   
            if(item.label == "水旱灾害风险区"){
                layerManager.removeAll()
                  layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
                let arr = item.children.map((items)=>{
                    return get(`${baseurl}${items.kbApiAll}`);
                })
                Promise.all(arr).then((res)=>{
                    let pointArr = []
                    res.forEach((item,index)=>{
                        pointArr.push(item.data) 
                    })
                    let arr1 =[]
                    let arr2 =[]
                    let arr3 =[]
                    let arr4 =[]
                    let arr5 =[]
                    let arr6 =[]
                    let arr7 =[]
                    let arr8 =[]
                    let arr9 =[]

                     for(let i =0;i<pointArr.length;i++){
                         arr1= pointArr[0]
                         arr2= pointArr[1]
                         arr3 =pointArr[2]
                         arr4= pointArr[3]
                         arr5= pointArr[4]
                         arr6 =pointArr[5]
                         arr7= pointArr[6]
                         arr8= pointArr[7]
                         arr9 =pointArr[8]
                     }
                     for(let j in arr1){
                        layerManager.addBillboards(arr1[j],"/data/images/icon/易受淹小区.png",'水旱灾害风险区',13,"易受淹小区","自然灾害")
                     }
                     for(let j in arr2){
                        layerManager.addBillboards(arr2[j],"/data/images/icon/漫水桥.png",'水旱灾害风险区',14,"漫水桥","自然灾害")
                     }
                     for(let j in arr3){
                        layerManager.addBillboards(arr3[j],"/data/images/icon/危房.png",'水旱灾害风险区',15,"危房","自然灾害")
                     }
                     for(let j in arr4){
                        layerManager.addBillboards(arr4[j],"/data/images/icon/低洼地.png",'水旱灾害风险区',16,"低洼地","自然灾害")
                     }
                     for(let j in arr5){
                        layerManager.addBillboards(arr5[j],"/data/images/icon/景区.png",'水旱灾害风险区',17,"景区","自然灾害")
                     }
                     for(let j in arr6){
                        layerManager.addBillboards(arr6[j],"/data/images/icon/堤防.png",'水旱灾害风险区',18,"堤防","自然灾害")
                     }
                     for(let j in arr7){
                        layerManager.addBillboards(arr7[j],"/data/images/icon/水闸.png",'水旱灾害风险区',19,"水闸","自然灾害")
                     }
                     for(let j in arr8){
                        layerManager.addBillboards(arr8[j],"/data/images/icon/水库.png",'水旱灾害风险区',20,"水库","自然灾害")
                     }
                     for(let j in arr9){
                        layerManager.addBillboards(arr9[j],"/data/images/icon/其他隐患.png",'水旱灾害风险区',134,"其他隐患","自然灾害")
                     }
                })
            }else if(item.label == "地质灾害风险区"){
                layerManager.removeAll()
                  layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
                  let arr = item.children.map((items)=>{
                    return get(`${baseurl}${items.kbApiAll}`);
                })
                Promise.all(arr).then((res)=>{
                    let pointArr = []
                    res.forEach((item,index)=>{
                        pointArr.push(item.data) 
                    })
                    let arr1 =[]
                    let arr2 =[]
                    let arr3 =[]

                     for(let i =0;i<pointArr.length;i++){
                         arr1= pointArr[0]
                         arr2= pointArr[1]
                         arr3 =pointArr[2]
                     }
                     for(let j in arr1){
                        layerManager.addBillboards(arr1[j],"/data/images/icon/崩塌.png",'水旱灾害风险区',22,"崩塌","自然灾害")
                     }
                     for(let j in arr2){
                        layerManager.addBillboards(arr2[j],"/data/images/icon/泥石流.png",'水旱灾害风险区',23,"泥石流","自然灾害")
                     }
                     for(let j in arr3){
                        layerManager.addBillboards(arr3[j],"/data/images/icon/滑坡.png",'水旱灾害风险区',24,"滑坡","自然灾害")
                     }
                })
            }else if(item.label == "森林草原火灾风险区"){
                for(var i =0;i<item.children.length;i++){
                    layerManager.removeAll()
                      layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
                    let kbId = item.children[i].kbId
                    if(item.children[i].label =="森林公园"){
                        get(`${baseurl}${item.children[i].kbApiAll}`).then((res)=>{
                        // let kbId = res.data.kbId
                        // console.log(res.data)
                        if(res.code == 200){
                            for(var i =0;i<res.data.length;i++){
                               layerManager.addBillboards(res.data[i],"/data/images/icon/森林公园.png","森林草原火灾风险区",kbId,"森林公园","自然灾害")
                            }
                        }
                    })
                    }
                }
            }
        }
        // 安全生产
        function initProduction(){
            let baseurl = window.loginUrl;
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"29"
                    }
			     }).then((res) => {
                    if(res.status == 200){
                        // console.log(res.data)
                        let productData=res.data
                        for(let key in productData){
                            // console.log(key)
                            if(key>=0 && key<=4){
                                danProArr.push(productData[key])
                                // console.log(productData[key])
                            }
                            if(key == 5){
                                // feikuangCount.value = productData[key].count
                                // productData[key]
                                // console.log(productData[key].count)
                            }
                        }
                        let xData =[]
                        let yData=[]
                        for(var i =0;i<danProArr.length;i++){
                            // weiCount.value += danProArr[i].count
                            xData.push(danProArr[i].label)
                            yData.push(danProArr[i].count)
                            drawWei(xData,yData)
                        }
                        // console.log(weiCount)
                    }

			})
        }
        onBeforeMount(() => {
            window.openDialog = function () {};
        });
        onMounted(() => {
            // drawWei();
            // drawQushi();
            screenWidth = document.body.clientWidth
            getModel();
            naturalDisaster();
            iconClick()
            initProduction()
            // drawBar()
            // opt = {
            //     container: "panoramaConianer", //容器
            //     url: "",
            //     width: "1920px", //指定宽度，高度自适应
            //     // lables:[
            //     //     {position:{lon:-163.44,lat:-7.92},logoUrl:'',text:'蓝窗户'},
            //     //     {position:{lon:114.12,lat:69.48},logoUrl:'',text:'一片云彩'},
            //     //     {position:{lon:-94.32,lat:-4.24},logoUrl:'',text:'大海'}
            //     // ],
            //     widthSegments: 60, //水平切段数
            //     heightSegments: 40, //垂直切段数（值小粗糙速度快，值大精细速度慢）
            //     pRadius: 1000, //全景球的半径，推荐使用默认值
            //     minFocalLength: 10, //镜头最a小拉近距离
            //     maxFocalLength: 10, //镜头最大拉近距离
            //     showlable: "show", // show,click
            // };
            // tp = new tpanorama(opt);
            // tp.init();
        });

        function getModel() {
            axios.get("./data/api-docs.json").then((res) => {
                models = res.data.definitions;
            });
        }
        function weiHandleClick() {
            // isWei.value = !isWei.value
            // if(isWei.value){
            layerManager.removeAll();
            // loadingInstance = ElLoading.service({
            //     lock: true,
            //     text: '数据加载中',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            get(`/api/pandect/safety/produceTypes`).then((res) => {
                console.log(res.data)
                console.log(res.data.slice(0, 5))
                let arr = res.data.slice(0, 5).map((item) => {
                    return get(
                        `/api/pandect/safety/produces/${item.name}?pageSize=65534&startPage=1`
                    );
                });
                let typeArray = res.data.map((item) => {
                    return item.name;
                });
                console.log(124)
                console.log(arr)
                //.all 顺序是一致的
                Promise.all(arr).then((res) => {
                    let currColorArr = colorArr.slice(0, res.length);
                    res.forEach((item, index) => {
                        // res.data.contents.forEach((item,index)=>{
                        //         if(item.lng){
                        //             layerManager.addBillboard("asd"+index,item.lng,item.lat,"/data/images/earth/local1.png")
                        //         }
                        // })
                        layerManager.addPoint(
                            item.data.contents,
                            currColorArr[index],
                            typeArray[index],
                            "leftClick",
                            clickHandle
                        );
                    });
                    nextTick(() => {
                        // loadingInstance.close();
                    });
                });
            });
            // }else{
            //     removeZiran()
            // }
        }
        function feiHandleClick() {
            // isFei.value = !isFei.value
            // if(isFei.value){
            layerManager.removeAll();
            // loadingInstance = ElLoading.service({
            //     lock: true,
            //     text: '数据加载中',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            get(`/api/pandect/safety/produceTypes`).then((res) => {
                let arr = res.data.slice(-1).map((item) => {
                    return get(
                        `/api/pandect/safety/produces/${item.name}?pageSize=65534&startPage=1`
                    );
                });
                let typeArray = res.data.map((item) => {
                    return item.name;
                });
                //.all 顺序是一致的
                Promise.all(arr).then((res) => {
                    let currColorArr = colorArr.slice(0, res.length);
                    res.forEach((item, index) => {
                        layerManager.addPoint(
                            item.data.contents,
                            currColorArr[index],
                            typeArray[typeArray.length - 1],
                            "leftClick",
                            clickHandle
                        );
                    });
                    nextTick(() => {
                        // loadingInstance.close();
                    });
                });
            });
            // }else{
            //     removeZiran()
            // }
        }
        return {
            currentIndex,
            feikuangCount,
            weiCount,
            weiAndQu,
            currentTitleIndex,
            isWei,
            isFei,
            title,
            //methods
            zrzhData,
            screenWidth,
            showDataOnEarth,
            changeChart,
            weiHandleClick,
            feiHandleClick,
            fourDisasters,
            changePanorama,
            barArr,
            barArrData,
            addBoundInfoBox,
            danProArr,
            infoData,
            kbId,
            closeInfo,
            inconInfo,
            infoTitle
        };
    },
};
</script>
<style scoped lang="stylus">
/deep/ ::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 4px;
  /* 高宽分别对应横竖滚动条的尺寸 */
  height: 0;
}

/deep/ ::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #2fd5ff;
  scrollbar-arrow-color: red;
}

/deep/ ::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .panoramaClose {
        position: absolute;
        right: vw(20);
        top: vh(20);
        cursor: pointer;
        color: #00EAFF;
    }

    .zeroHeight {
        overflow: hidden;
        position: absolute;
        height: 100vw;
        width: 0vh;
        z-index: 100000;
        background: #000;

        #panoramaConianer {
            overflow: hidden;
            position: absolute;
            height: 100vw;
            width: 50vh;
            z-index: 100000;
            background: #000;
        }
    }

    .allHeight {
        overflow: hidden;
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 100000;
        background: #000;
        top: -80px;
        left: 0;

        .panoramaClose {
            position: absolute;
            right: vw(20);
            top: vh(20);
            cursor: pointer;
            color: #00EAFF;
            background:pink
        }
    }

    .leftFx {
       .infobox1{
		width:vw(806);
		height:vh(400);
		background:rgba(3, 28, 35,0.8);
		display :none;
		position:fixed;
		z-index :999;
        // background:pink
		.treeinfo-top{
			width:100%;
			height:vh(50);
			background:#0b8fab;
			line-height :vh(50);
			padding-left:vw(25);
			box-sizing :border-box;
			.treeinfo-title{
			  font-size:16px;
		    }
			.close{
				float:right;
				font-size:20px;
				height:vh(50);
				line-height :vh(50);
				padding-right:vw(25);
				cursor:pointer;
			}
		}
		.treeinfo-con{
			width:100%;
			height:vh(300);
			padding:vh(20) vw(20);
			box-sizing :border-box;
			.treeinfo-contitle{
				width:100%;
				height:vh(30);
				line-height:vh(10);
				color:rgb(11, 143, 171);
				border-bottom 1px solid #cccccc;
			}
			.treeinfo-content{
				width:100%;
			    height:vh(280);
				padding-top:vh(20);
				padding-bottom:vh(20);
				box-sizing :border-box;
				overflow-y:auto;
				.treeinfo-inner{
					width:vw(370);
					// height vh(20);
					line-height :vh(27);
					float:left;
					display:flex;
					justify-content:space-around;
					span:nth-child(1){
						// width:vw(130);
						display:block;
						text-align:right;
						// float :left
						color:#9fabb9;
						font-size:12px;
						font-weight: 600;
						flex:1;
					}
					span:nth-child(2){
						// width:vw(140);
						display:block;
						text-align:left;
						font-size:12px;
						flex:1;
						// float :left
					}
				}
			}
		}
		
	}
        #natural {
            margin-top: vh(20);
            width: 100%;
            height: vh(150);
        }

        .fourDisasters {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: vh(20);

            .disaster {
                cursor: pointer;
                flex-shrink: 0;
                width: vw(174);
                height: vh(64);
                background: linear-gradient(to right, rgba(14, 103, 160, 0.5), rgba(0, 0, 0, 0));
                border-left: 1px solid #0e67a0;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-top: vh(13);

                .upContent {
                    display: flex;

                    div:nth-child(1) {
                        flex: 2;

                        div {
                            width: vw(12);
                            height: vh(12);
                            border: 4px solid #fff;
                            border-radius: 50%;
                            background: #f00;
                            margin: 0 auto;
                            margin-top: vh(2);
                        }
                    }

                    div:nth-child(2) {
                        flex: 8;
                        font-size: vw(15);
                    }
                }

                .downContent {
                    display: flex;

                    div:nth-child(1) {
                        flex: 2;
                    }

                    div:nth-child(2) {
                        flex: 8;
                        font-size: vw(20);
                        color: rgba(255, 241, 148, 1);

                        span {
                            font-size: vw(15);
                            color: #fff;
                        }
                    }
                }
            }

            div.disasterActive {
                border-left: 10px solid #0e67f9;
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(28);
            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .geoCarousel {
                width: vw(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw(163);
                        height: vh(135);
                        margin-right: vw(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw(168);
                        height: vh(139);
                        padding: vh(12) vw(0);
                        line-height: vh(17);
                    }
                }
            }
        }

        .safeProduc {
            margin-top: vh(15);
            margin-bottom: vh(18);
            background: url('/data/images/hngk/liangdian.png') no-repeat;
            background-size: 100% 100%;
            width: vw(364);
            height: vh(160);
            padding-top: vh(24);

            .dangerItem {
                margin-left: vw(29);

                span:nth-child(1) {
                    font-size: vw(16);
                }

                span:nth-child(2) {
                    font-size: vw(22);
                    color: rgba(55, 220, 255, 1);
                }
            }

            .enterpriseNum {
                margin-top: vh(26);
                display: flex;
                justify-content: space-around;

                .enterprise {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: vh(50);
                    cursor: pointer;

                    div:nth-child(1) {
                        font-size: vw(16);
                        flex-shrink: 0;
                        width: vw(100);
                        text-align: center;
                    }

                    .weiActive {
                        color: rgba(8, 199, 241, 1);
                    }

                    div:nth-child(2) {
                        flex-shrink: 0;
                        width: vw(100);
                        text-align: center;
                        font-size: vw(16);
                        color: rgba(255, 188, 50, 1);
                    }
                }
            }

            .twoPoints {
                margin-left: vw(29);
                margin-top: vh(21);
                font-size: vw(16);

                span:nth-child(1) {
                    color: #fff;
                }

                span:nth-child(2) {
                    color: rgba(55, 220, 255, 1);
                }

                span:nth-child(3) {
                    color: rgba(55, 220, 255, 1);
                }
            }

            .oneArea {
                margin-top: vh(21);
                margin-left: vw(29);
                font-size: vw(16);

                span:nth-child(1) {
                    color: #fff;
                }

                span:nth-child(2) {
                    color: rgba(55, 220, 255, 1);
                }
            }
        }

        .troubleMsg {
            width: vw(363);
            height: vh(220);
            // padding-top: vh(19);
            text-align: center;
            font-size: vw(13);
            .troubleMsgTitle{
                margin-bottom: vh(13);
                display: flex;
                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }
                .troubleMsgWorld {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }
            .troubleMsgEcharts{
                width:vw(363);
                height: vh(210);
                background: url('/data/images/hngk/shigu.png') no-repeat;
                 background-size: 100% 100%;
            }
            // .troubleTitle {
            //     color: #00e5ff;
            //     display: flex;
            //     width: 80%;
            //     height: vh(25);
            //     line-height: vh(25);
            //     box-sizing: border-box;
            //     margin: 0 auto;
            //     cursor: pointer;

            //     div {
            //         width: 50%;
            //         box-sizing: border-box;
            //         border: 1px solid #ddd;
            //     }

            //     .titleActive {
            //         color: rgba(55, 220, 255, 1);
            //         border: 1px solid rgba(55, 220, 255, 1);
            //     }
            // }
            .troubleCharts {
                margin-top: vh(20);

                #weiChart {
                    width: 98%;
                    margin: 0 auto;
                    height: vh(150);
                }

                #qushiChart {
                    width: vw(360);
                    margin: 0 auto;
                    height: vh(150);
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .panoramaClose {
        position: absolute;
        right: vw1(20);
        top: vh(100);
        cursor: pointer;
        color: #00EAFF;
        display: none;
    }

    .zeroHeight {
        overflow: hidden;
        position: absolute;
        height: 0vw;
        width: 0vh;
        z-index: 100000;
        background: #000;
        display: none;

        #panoramaConianer {
            overflow: hidden;
            position: absolute;
            height: 100vw;
            width: 50vh;
            z-index: 100000;
            background: #000;
            display: none;
        }
    }

    .allHeight {
        overflow: hidden;
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 100000;
        background: #000;
        top: -80px;
        left: 0;
        display: none;

        .panoramaClose {
            position: absolute;
            right: vw1(20);
            top: vh(20);
            cursor: pointer;
            color: #00EAFF;
            
        }
    }

    .leftFx {
        .infobox1{
		width:vw1(806);
		height:300px;
		background:rgba(3, 28, 35,0.8);
		display :none;
		position:fixed;
		z-index :999
		.treeinfo-top{
			width:100%;
			height:vh(50);
			background:#0b8fab;
			line-height :vh(50);
			padding-left:vw(25);
			box-sizing :border-box;
			.treeinfo-title{
			  font-size:16px;
		    }
			.close{
				float:right;
				font-size:20px;
				height:vh(50);
				line-height :vh(50);
				padding-right:vw(25);
				cursor:pointer;
			}
		}
		.treeinfo-con{
			width:100%;
			height:vh(300);
			padding:vh(20) vw1(30);
			box-sizing :border-box;
			.treeinfo-contitle{
				width:100%;
				height:vh(30);
				line-height:vh(10);
				color:rgb(11, 143, 171);
				border-bottom 1px solid #cccccc;
			}
			.treeinfo-content{
				width:100%;
			    height:vh(230);
				padding-top:vh(20);
				padding-bottom:vh(20);
				box-sizing :border-box;
				overflow-y:auto;
				.treeinfo-inner{
					width:vw1(370);
					// height vh(20);
					line-height :vh(27);
					float:left;
					display:flex;
					justify-content:space-around;
					span:nth-child(1){
						// width:vw(130);
						display:block;
						text-align:right;
						// float :left
						color:#9fabb9;
						font-size:12px;
						font-weight: 600;
						flex:1;
					}
					span:nth-child(2){
						// width:vw(140);
						display:block;
						text-align:left;
						font-size:12px;
						flex:1;
						// float :left
					}
				}
			}
		}
		
	}
        position:absolute;
        top:vh(110);
        left:vw1(37);
        #natural {
            margin-top: vh(20);
            width: vw1(414);
            height: vh(300);
        }
        .fourDisasters {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: vh(10);
            width: vw1(430);
            height: vh(200);
            .disaster {
                cursor: pointer;
                flex-shrink: 0;
                width: vw1(190);
                height: vh(80);
                background: linear-gradient(to right, rgba(14, 103, 160, 0.5), rgba(0, 0, 0, 0));
                border-left: 1px solid #0e67a0;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-top: vh(10);
                margin-left:vw1(-25);
                .upContent {
                    display: flex;
                    div:nth-child(1) {
                        flex: 2;
                        div {
                            width: vw1(12);
                            height: vh(12);
                            border: 4px solid #fff;
                            border-radius: 50%;
                            background: #f00;
                            margin: vh(6) auto;
                        }
                    }
                    div:nth-child(2) {
                        flex: 8;
                        font-size: vw1(16);
                        margin-top: vh(6);
                    }
                }

                .downContent {
                    display: flex;

                    div:nth-child(1) {
                        flex: 2;
                    }

                    div:nth-child(2) {
                        flex: 8;
                        font-size: vw1(20);
                        color: rgba(255, 241, 148, 1);

                        span {
                            font-size: vw1(15);
                            color: #fff;
                        }
                    }
                }
            }

            div.disasterActive {
                border-left: 1px solid #0e67f9;
            }
        }

        .geoIntroAQ {
            position: absolute;
            top: vh(52);
            right: 0;
        }

        .geoIntro {
            width: vw1(414);
            margin-top: vh(28);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .geoCarousel {
                width: vw1(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw1(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw1(163);
                        height: vh(135);
                        margin-right: vw1(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw1(168);
                        height: vh(139);
                        padding: vh(12) vw1(0);
                        line-height: vh(17);
                    }
                }
            }
        }

        .safeProduc {
            position: absolute;
            top: vh(110);
            right: 0;
            margin-top: vh(25);
            margin-bottom: vh(50);
            background: url('/data/images/hngk/fx.png') no-repeat;
            background-size: 100% 100%;
            width: vw1(414);
            height: vh(485);
            padding-top: vh(24);

            .dangerItem {
                margin-left: vw1(32);
                margin-top: vh(30);
                // text-align:left;
                span:nth-child(1) {
                    font-size: vw1(20);
                }
                span:nth-child(2) {
                    font-size: vw1(26);
                    color: rgba(55, 220, 255, 1);
                }
            }

            .enterpriseNum {
                margin-top: vh(50);
                display: flex;
                justify-content: space-around;
                .enterprise {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: vh(60);
                    cursor: pointer;
                    div:nth-child(1) {
                        font-size: vw1(20);
                        flex-shrink: 0;
                        width: vw1(100);
                        text-align: center;
                    }
                    .weiActive {
                        color: rgba(8, 199, 241, 1);
                    }
                    div:nth-child(2) {
                        flex-shrink: 0;
                        width: vw1(100);
                        text-align: center;
                        font-size: vw1(24);
                        color: rgba(255, 188, 50, 1);
                    }
                }
            }

            .twoPoints {
                margin-left: vw1(32);
                margin-top: vh(90);
                font-size: vw1(20);
                span:nth-child(1) {
                    color: #fff;
                    font-size: vw1(20);
                }

                span:nth-child(2) {
                    color: rgba(55, 220, 255, 1);
                    font-size: vw1(24);
                }

                span:nth-child(3) {
                    color: rgba(55, 220, 255, 1);
                    font-size: vw1(24);
                }
            }

            .oneArea {
                margin-top: vh(80);
                margin-left: vw1(32);
                font-size: vw1(20);

                span:nth-child(1) {
                    color: #fff;
                }

                span:nth-child(2) {
                    color: rgba(55, 220, 255, 1);
                     font-size: vw1(24);
                }
            }
        }

       .troubleMsg {
            width: vw1(863);
            height: vh(320);
            // padding-top: vh(19);
            text-align: center;
            font-size: vw1(16);
            .troubleMsgTitle{
                margin-bottom: vh(33);
                display: flex;
                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }
                .troubleMsgWorld {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }
            .troubleMsgEcharts{
                width:vw1(863);
                height: vh(250);
                background: url('/data/images/hngk/shigu.png') no-repeat;
                background-size: 100% 100%;
                // margin-top:vh(15)
            }
            // .troubleTitle {
            //     color: #00e5ff;
            //     display: flex;
            //     width: 80%;
            //     height: vh(25);
            //     line-height: vh(25);
            //     box-sizing: border-box;
            //     margin: 0 auto;
            //     cursor: pointer;

            //     div {
            //         width: 50%;
            //         box-sizing: border-box;
            //         border: 1px solid #ddd;
            //     }

            //     .titleActive {
            //         color: rgba(55, 220, 255, 1);
            //         border: 1px solid rgba(55, 220, 255, 1);
            //     }
            // }
            .troubleCharts {
                margin-top: vh(20);

                #weiChart {
                    width: 98%;
                    margin: 0 auto;
                    height: vh(150);
                }

                #qushiChart {
                    width: vw1(360);
                    margin: 0 auto;
                    height: vh(150);
                }
            }
        }
    }
}
</style>